<template>
  <div class="box">

    <div class="select" >
      <div style="display: flex; justify-content: center; align-items: center; margin-left: 6%;">
        <h3>HelloWorld</h3>
      </div>
      <div @keydown.enter="soSuo(input)" style="width: 590px;">
        <el-input v-model="input" placeholder="请输入内容" style="width: 400px;"></el-input>
        <el-button type="success" :plain="true"  round style="margin-left: 1%;" @click="soSuo(input)">搜索</el-button>
      </div>
    </el-select>
  
    </div>
    <!-- https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png -->
    <div class="mianbaoxie">
      <el-breadcrumb separator=">" style="margin-top: 5px;margin-bottom: 5px; margin-left: 4.5%; font-size: 17spx;">
        <el-breadcrumb-item>全部结果</el-breadcrumb-item>
        <el-breadcrumb-item style="color: gold !important">{{input}}</el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>

      <div class="data">
       
        <div style="width: 100%; height: 10px; padding-left: 70px;">
          <span style="font-family:'Times New Roman', Times, serif;">排序</span>
          <span style="font-family:'Times New Roman', Times, serif;margin-left: 10px;">默认</span>
          <span style="font-family:'Times New Roman', Times, serif;margin-left: 5px;">&nbsp;价格 <i class="el-icon-d-caret"></i>
        </span>
        </div>
        
        <!-- <span style="width: 100%; border-bottom: 1px solid darkgrey;"></span> -->
        <!-- <div style="display: flex;flex-wrap: wrap;"> -->
          <div class="data-box"  v-for="item in data" :key="item.id">
  
            <div class="img">
              <img :src="item.url" alt="" style="width: 130px;">
              <div style="font-size: 20px;">{{item.name}}</div>
              <div style="font-size: 20px; color: aqua;">{{item.jianjie}}</div>
              <span style="color: red; font-size: 30px;">￥{{item.youhui}}</span> 
              <span style="color: darkgrey; text-decoration: line-through;">￥{{item.jiage}}</span>
              
             
    
            </div>
    
          </div>
        <!-- </div> -->


        <div style="margin-left: 90%;">
          <el-pagination
          background
          layout="prev, pager, next"
          :total="1">
        </el-pagination>
         </div>
      </div>
   
      
    </div>
    


    
  </div>
</template>

<script>

export default{

  name:'HelloWorld',
  props:{
    msg:String
  },
  data(){
    return{
      input: '',
      data:[
        {id:1,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:2,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:3,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:4,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:5,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:6,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:7,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        {id:8,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        // {id:1,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
        // {id:1,url:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',name:'汉堡',jianjie:'香喷喷',jiage:'100',youhui:'20'},
      ]

    };
  },mounted(){
    
  }, methods:{
    soSuo(input){
      if(input==null||input==''){
        this.$message('请输入正确内容~');
        retrun;
      }
      console.log('input:',input);

      this.$axios.get('http://127.0.0.1:8080/api/shangpin/sosuo',{
        params:{
          miaoshu:input
        }
      }).then(res=>{
        data = res.data;
      }).catch(error=>{
        console.log('error:',error);
      })



    }
  }



}

  



</script>


<style lang="scss" scoped>
  .box{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    width: 98vw;
    /* background-color: cornflowerblue; */
    height: 97.8vh;
    /* border: 1px solid red; */

    .select{
      display: flex;
      justify-content: space-between;
      margin-top: 1%;
      margin-right: 0%;
      width: 100%;
      height: 40px;
      /* border: 1px solid khaki; */

    }
    .mianbaoxie{
      width: 100%;
      height: 100%;
      /* border: 1px solid khaki; */
      background-color: darkgray;
      /* padding-left: 2%; */
    }
    .data{
      display: flex;
      justify-content: center;
      /* align-items: center; */
      flex-wrap: wrap;
      width: 90%;
      background-color: white;
      height: 96%;
      margin-left: 5%;
      /* margin-top: 1%; */
      /* padding-top: 1%; */
      /* border: 1px solid lawngreen; */

      .data-box{
        display: flex;
        justify-content: center;
        /* align-items: center; */
        width: 260px;
        margin-left: 4%;
        height: 270px;
        background-color: aliceblue;
        /* border: 1px solid red; */

        .img{
          text-align: center;
        }


      }
      
  }

  .el-pagination .el-pager li.active {
  background-color: gold;
}

.el-breadcrumb-item a{
  color: gold;
}

}

</style>
